<template>
  <div class="content">
    <div class="container">
      <div class="heading">Sign In</div>
      <form action="" class="form">
        <input class="input" type="number" name="" id="email" v-model="phone" placeholder="请输入账号" />
        <input style="margin-top: 0.6rem" class="input" type="text" v-model="password" id="password"
          placeholder="请输入密码" />
        <button class="login-button" @click.prevent="btn">登录</button>
        <!-- <input class="login-button" type="submit" value="登录" @click="btn" /> -->
      </form>

      <span class="agreement"> 欢迎登陆天天囤券数字化运营平台</span>
    </div>
    <van-popup class="popup" v-model="show" :close-on-click-overlay="false">
      <div class="editWord">
        <div class="heading" style="margin-top:.5rem ;">修改密码</div>
        <form action="" class="form">

          <input style="margin-top: 0.6rem" class="input" type="password" v-model="password1" id="number"
            placeholder="请输入密码" />
          <input style="margin-top: 0.6rem" class="input" type="password" v-model="password2" id="number"
            placeholder="请再次输入密码" />
          <button class="login-button" style="margin: .8rem auto .5rem;" @click.prevent="editbtn">修改</button>
        </form>

      </div>
    </van-popup>
  </div>
</template>

<script>
import { login, updatePwd } from "@/api/fulfil.js";
export default {
  name: 'login',
  data() {
    return {
      phone: "",
      password: "",
      show: false,
      password1: '',
      password2: '',
      agentid: '',
    };
  },
  activated() {
    let agentid = localStorage.getItem("agentid");
    let agentids = localStorage.getItem("agentids");
    let role = localStorage.getItem("role");
    console.log(agentids, 'agentids');
    if (role == 8 && agentids) {
      this.login(agentids);
    } else if (agentid) {
      this.login(agentid)
    }
  },

  methods: {
    //修改密码
    editbtn() {
      if (!this.password1 || !this.password2) {
        this.$Toast("请输入需要修改的密码");
      } else if (this.password1 && this.password2) {
        if (this.password1 != this.password2) {
          this.$Toast("两次密码不一致请重新输入");
        } else {
          this.edit();
        }
      }
    },
    btn() {
      if (!this.phone) {
        this.$Toast("请输入账号");
      } else if (!this.password) {
        this.$Toast("请输入密码");
      } else {
        this.login();
      }
    },
    edit() {
      updatePwd({
        agentid: this.agentid,
        pwd: this.password1,
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.show = false;
            this.password1 = '';
            this.password2 = '';
            this.$Toast("修改密码成功请重新登录");
          } else {
            this.$Toast(res.data.msg);
          }

        })
        .catch((error) => {
          console.log(error);
        });
    },
    login(agentid) {

      // var formData = new FormData();
      // formData.append("phone", this.phone);
      // formData.append("psw", this.password);
      let that = this;
      login({
        phone: that.phone,
        pwd: that.password,
        agentid: agentid ? agentid : '',
      })
        .then((res) => {
          if (res.data.code == 0) {
            //2账号禁用
            if (res.data.data.agent.state == 2) {
              this.$Toast("该账号已禁用！");
            } else {

              that.agentid = res.data.data.agent.id;
              if (res.data.data.agent.isFirstLogin == 1) {
                this.$Toast("请先修改密码！");
                that.password = '';
                that.show = true;
              } else {

                localStorage.setItem("role", res.data.data.agent.role);
                if (agentid) {
                  that.$Toast("登录成功！");
                }
                this.phone = '';
                this.password = '';
                if (res.data.data.agent.role == 8) {
                  localStorage.setItem("agentids", res.data.data.agent.id);
                  that.$router.push({
                    path: "/supertube",
                  });
                } else if(res.data.data.agent.role == 2){
                  localStorage.setItem("agentids", res.data.data.agent.id);
                  localStorage.setItem("agentid", res.data.data.agent.id);
                  that.$router.push({
                    path: "/President",
                  });
                }
                else {
                  // 1是助理 2不是助理
                  if(res.data.data.staff && res.data.data.staff.id){
                    localStorage.setItem("staff", 1);
                  }else {
                    localStorage.setItem("staff", 2);
                  }
                  localStorage.setItem("agentid", res.data.data.agent.id);

                  that.$router.push({
                    path: "/index",
                  });
                }

              }
            }




          } else {
            this.$Toast(res.data.msg);
            localStorage.removeItem('agentid');
            localStorage.removeItem('agentids');
            localStorage.removeItem('role');
            localStorage.removeItem("adminid");
          }
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.content {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  background: #e8e8e8;
}

.container {
  margin: 1.625rem auto 0;
  width: 80%;
  height: 12rem;
  background: #f8f9fd;
  background: linear-gradient(0deg,
      rgb(255, 255, 255) 0%,
      rgb(244, 247, 251) 100%);
  border-radius: 0.5rem;
  padding: 0.3125rem 0.4375rem;
  border: 0.0625rem solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 0.375rem 0.375rem --0.25rem;
}

.heading {
  margin-top: 1.5rem;
  text-align: center;
  font-weight: 900;
  font-size: 0.375rem;
  color: rgb(16, 137, 211);
}

.form {
  overflow: hidden;
  box-sizing: border-box;
  width: 80%;
  margin: 0.25rem auto;
}

.form .input {
  margin-top: 1.2875rem;
  width: 90%;
  background: white;
  border: none;
  padding: 0.1875rem 0.25rem;
  border-radius: 0.25rem;
  box-shadow: #cff0ff 0px 0.125rem 0.125rem -0.0625rem;
  border-inline: 2px solid transparent;
}

.form .input::-moz-placeholder {
  color: rgb(170, 170, 170);
}

.form .input::placeholder {
  color: rgb(170, 170, 170);
}

.form .input:focus {
  outline: none;
  border-inline: 2px solid #12b1d1;
}

.form .forgot-password {
  display: block;
  margin-top: 0.125rem;
  margin-left: 0.125rem;
}

.form .forgot-password a {
  font-size: 0.375rem;
  color: #0099ff;
  text-decoration: none;
}

.form .login-button {
  display: block;
  width: 100%;
  font-weight: bold;
  background: linear-gradient(45deg,
      rgb(16, 137, 211) 0%,
      rgb(18, 177, 209) 100%);
  color: white;
  padding-block: 0.1875rem;
  margin: 2.5rem auto;
  border-radius: 0.25rem;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 0.25rem 0.125rem --0.1875rem;
  border: none;
  transition: all 0.2s ease-in-out;
}

.form .login-button:hover {
  transform: scale(1.03);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 0.2875rem 0.125rem --0.25rem;
}

.form .login-button:active {
  transform: scale(0.95);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 0.1875rem 0.125rem --0.125rem;
}

.social-account-container {
  margin-top: 0.3125rem;
}

.social-account-container .title {
  display: block;
  text-align: center;
  font-size: 0.125rem;
  color: rgb(170, 170, 170);
}

.social-account-container .social-accounts {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.1875rem;
  margin-top: 0.0625rem;
}

.social-account-container .social-accounts .social-button {
  background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);
  border: 0.0625rem solid white;
  padding: 0.0625rem;
  border-radius: 50%;
  width: 0.5rem;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 0.15rem 0.125rem -0.1rem;
  transition: all 0.2s ease-in-out;
}

.social-account-container .social-accounts .social-button .svg {
  fill: white;
  margin: auto;
}

.social-account-container .social-accounts .social-button:hover {
  transform: scale(1.2);
}

.social-account-container .social-accounts .social-button:active {
  transform: scale(0.9);
}

.agreement {
  display: block;
  text-align: center;
  margin-top: 0.1875rem;
}

.agreement {
  text-decoration: none;
  color: #0099ff;
  font-size: 0.25rem;
}

.popup {
  border-radius: .5rem;
  width: 80%;
  border: 0.0625rem solid rgb(255, 255, 255);
  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 0.375rem 0.375rem --0.25rem;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
}

.editWord {
  margin: 0 auto;
  width: 80%;
  border-radius: .5rem;
}
</style>